<template>
  <div class="hm-index">
    <router-view class="hm-index-router"></router-view>
    <span class="hm-index-link-footer">
    <router-link :to="{path:'/index/mianjing',query:{username:username,token:token} }" >追云</router-link>
    <router-link :to="{path:'/index/shoucang',query:{username:username,token:token}}">断月</router-link>
    <router-link :to="{path:'/index/dianzan',query:{username:username,token:token}}">逐星</router-link>
    <router-link :to="{path:'/index/wode',query:{username:username,token:token}}">啸日</router-link>
    </span>
  </div>
</template>

<script>
export default {
    name: 'HmIndex',
    data() {
        return {
            username: 'heima',
            token: '00001'
        }
    },
    // 组件创建完成时执行
    created() {
        this.username = this.$route.query.username;
        this.token = this.$route.query.token;
        // 设置默认的路由查询参数
        if (!this.$route.query.username || !this.$route.query.token) {
          this.$router.replace({ path: '/index/mianjing', query: { username: this.username, token: this.token } });
        } 
        // console.log('HmIndex created'+this.username+this.token)
    }
}
</script>

<style scoped lang="less">
.hm-index-link-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: rgb(186, 186, 186);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.hm-index-router{
  
  // 宽度100%，高度为屏幕高减去底部导航栏的高度
  width: 100%;
  height: calc(100vh - 50px);
  // background-color: #753838;
  // 位置靠左靠上
  position: absolute;
  top: 0;
  left: 0;
}

.hm-index-link-footer a {
  width: 25%; /* 调整每个按钮的宽度为25% */
  color: #000000; /* 未选中状态的文字颜色改为深色 */
  text-decoration: none;
}

// .router-link-exact-active {
  
// }
.router-link-active{
  background-color: #66ccff; /* 选中状态的背景色改为亮一些的颜色 */
  width: 100%; /* 确保背景色铺满整个可点击区域 */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: red; /* 修改选中状态的文字颜色为红色 */
}
</style>